<template>
  <div class="app-container">
    <div class="search-bar">
      <el-select
        v-model="reportType"
        placeholder="请选择报表"
        size="large"
        class="r-class"
        @change="changeReport"
      >
        <el-option
          v-for="item in reportList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <el-table v-loading="loading" :data="batchList" highlight-current-row>
      <el-table-column prop="project" label="项目">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.project"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="计量单位">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.unit"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="coal" label="省内公用煤电">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.coal"></el-input>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="review">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible" title="短信发送设置" width="500">
      <el-form :model="form">
        <el-form-item label="提前多少天发送短信" :label-width="formLabelWidth">
          <el-input-number v-model="form.num" :step="1" :max="30" />
        </el-form-item>
        <el-form-item label="短信内容" :label-width="formLabelWidth">
          <el-input v-model="form.content" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

const dialogFormVisible = ref(false)
const form = reactive({
  num: '',
  content: ''
})
const reportType = ref('');
const loading = ref(false);

const reportList = reactive([
  {
    label: '容量电费结算情况',
    value: 1,
  },
  {
    label: '煤电机组容量电费扣减情况',
    value: 2,
  },
]);
const changeReport = (val: any) => {};

const batchList = ref([
  {
    project: 'sj2025032601',
    unit: '万千瓦',
    coal: '',
  },
  {
    project: 'sj2025032601',
    unit: '万千瓦',
    coal: '',
  },
  {
    project: 'sj2025032601',
    unit: '万千瓦',
    coal: '',
  },
  {
    project: 'sj2025032601',
    unit: '万千瓦',
    coal: '',
  },
]);

const review = () => {
  ElMessage.error("您在xxx申请的主数据修改已不通过！");
  dialogFormVisible.value = true
}
</script>

<style lang="scss" scoped>
.r-class {
  width: 300px;
  margin-bottom: 15px;
}
</style>